<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	template="/WEB-INF/tiles/template.xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets">

	<ui:define name="menu">
		<ui:include src="/WEB-INF/tiles/menu.xhtml" />
	</ui:define>

	<ui:define name="body">
		<div class="container">
			<!-- Example row of columns -->
			<div class="row">
				<div class="col-md-12">
					<h:form styleClass="form-horizontal" prependId="false"
						autocomplete="off">
						<div class="">
							<ul class="nav nav-tabs" id="myTab">
								<li class="active"><a data-toggle="tab"
									href="#contaCorrenteMB">Abertura de conta</a></li>
							</ul>
						</div>

						<div class="tab-content">
							<div class="tab-pane active" id="contaCorrenteMB">
								<div class="page-header">
									<h4>
										INFORMAÇÃO SOBRE A CONTA<small> Preencha as dados</small>
									</h4>
								</div>
								<div class="form-group">
									<h:outputLabel value="Tipo de Conta"
										styleClass="col-sm-2 control-label" />
									<h:panelGrid styleClass="col-sm-2">
										<h:inputText styleClass="form-control" value="Conta-corrente"
											disabled="true" />
									</h:panelGrid>
								</div>
								<div class="form-group">
									<h:outputLabel value="Modalidade"
										styleClass="col-sm-2 control-label" />
									<h:panelGrid styleClass="col-sm-3">
										<h:selectOneMenu id="modalidade" onchange="commit();"
											value="#{contaCorrenteMB.modalidade}" valueChangeListener="#{contaCorrenteMB.changeModalidade}"
											styleClass="form-control">
											<f:selectItem itemLabel="Selecione..." itemValue="" />
											<f:selectItem itemLabel="Eletrônica" itemValue="ELETRONICA" />
											<f:selectItem itemLabel="Salário" itemValue="SALARIO" />
											<f:selectItem itemLabel="Especial Eletrônica"
												itemValue="ESPECIAL" />
										</h:selectOneMenu>
									</h:panelGrid>
								</div>
								<div class="form-group">
									<h:outputLabel value="Natureza"
										styleClass="col-sm-2 control-label" />
									<h:panelGrid styleClass="col-sm-3">
										<h:selectOneMenu id="natureza"
											value="#{contaCorrenteMB.natureza}"
											styleClass="form-control">
											<f:selectItem itemLabel="Selecione..." itemValue="" />
											<f:selectItem itemLabel="Física" itemValue="FISICA" />
											<f:selectItem itemLabel="Jurídica" itemValue="JURIDICA" />
										</h:selectOneMenu>
									</h:panelGrid>
								</div>
								<div class="form-group">
									<h:outputLabel value="Agencia"
										styleClass="col-sm-2 control-label" />
									<h:panelGrid styleClass="col-sm-3">
										<h:inputText styleClass="form-control"
											value="#{contaCorrenteMB.agencia.numero}" readonly="true" />
									</h:panelGrid>
								</div>
								<div class="form-group">
									<h:outputLabel value="Nº Conta"
										styleClass="col-sm-2 control-label" />
									<h:panelGrid styleClass="col-sm-3">
										<h:inputText styleClass="form-control" readonly="true"
											value="#{contaCorrenteMB.numeroConta}" />
									</h:panelGrid>
								</div>
								<div class="page-header">
									<h4>
										INFORMAÇÃO DO CLIENTE<small> Preencha as dados</small>
									</h4>
								</div>
								<div class="form-group">
									<h:outputLabel value="CPF" styleClass="col-sm-2 control-label" />
									<h:panelGrid styleClass="col-sm-3">
										<h:inputText styleClass="form-control"
											value="#{contaCorrenteMB.conta.cliente.cpfCnpj}" />
									</h:panelGrid>
								</div>
								<div class="form-group">
									<h:outputLabel value="Nome completo"
										styleClass="col-sm-2 control-label" />
									<h:panelGrid styleClass="col-sm-3">
										<h:inputText styleClass="form-control"
											value="#{contaCorrenteMB.conta.cliente.nome}" />
									</h:panelGrid>
								</div>
								<div class="page-header">
									<h4>
										ENDEREÇO DO CLIENTE<small> Preencha as dados</small>
									</h4>
								</div>
								<div class="form-group">
									<h:outputLabel value="CEP" styleClass="col-sm-2 control-label" />
									<h:panelGrid styleClass="col-sm-3">
										<h:inputText styleClass="form-control"
											value="#{contaCorrenteMB.conta.cliente.endereco.cep}"  />
									</h:panelGrid>
								</div>
								<div class="form-group">
									<h:outputLabel value="Endereço completo"
										styleClass="col-sm-2 control-label" />
									<h:panelGrid styleClass="col-sm-4">
										<h:inputText styleClass="form-control" placeholder="Endereço"
											value="#{contaCorrenteMB.conta.cliente.endereco.logradouro}" />
									</h:panelGrid>
									<h:panelGrid styleClass="col-sm-2">
										<h:inputText styleClass="form-control" placeholder="Numero"
											value="#{contaCorrenteMB.conta.cliente.endereco.numero}" />
									</h:panelGrid>
								</div>
								<div class="form-group">
									<h:outputLabel value="" styleClass="col-sm-2 control-label" />
									<h:panelGrid styleClass="col-sm-3">
										<h:inputText styleClass="form-control" placeholder="Bairro"
											value="#{contaCorrenteMB.conta.cliente.endereco.bairro}" />
									</h:panelGrid>
									<h:panelGrid styleClass="col-sm-3">
										<h:inputText styleClass="form-control" placeholder="Cidade"
											value="#{contaCorrenteMB.conta.cliente.endereco.cidade}" />
									</h:panelGrid>
									<h:panelGrid styleClass="col-sm-3">
										<h:inputText styleClass="form-control" placeholder="Estado"
											value="#{contaCorrenteMB.conta.cliente.endereco.estado}" />
									</h:panelGrid>
								</div>
								<div class="page-header">
									<h4>
										INFORMAÇÃO DA CONTA<small> Preencha as dados</small>
									</h4>
								</div>
								<div class="form-group">
									<label for="numero" class="col-sm-2 control-label">Liberar
										limite de crédito?</label>
									<div class="col-sm-3">
										<div class="check-inline">
											<h:selectBooleanCheckbox id="liberarLimiteCredito" disabled="#{contaCorrenteMB.habilitaLimiteCredito}"
												value="#{contaCorrenteMB.liberarLimiteCredito}"></h:selectBooleanCheckbox>
										</div>
									</div>
								</div>
								<div class="form-group">
									<label for="numero" class="col-sm-2 control-label">Limite
										pré-aprovado</label>
									<div class="col-sm-3">
										<div class="check-inline">
											<h:selectBooleanCheckbox id="liberarLimitePreAprovado" disabled="#{contaCorrenteMB.habilitaLimitePreAprovado}"
												value="#{contaCorrenteMB.liberarLimitePreAprovado}"></h:selectBooleanCheckbox>
										</div>
									</div>
								</div>
								<div class="form-group">
									<label for="numero" class="col-sm-2 control-label"></label>
									<div class="col-sm-10">
										<!-- 								<a class="btn btn-info btn-xs" href="index.jsf" data-toggle="modal">Alterar Situacao</a> -->
										<!-- 																<button class="btn btn-info btn-xs" style="margin-bottom:5px" data-toggle="modal" data-target="#myModal" type="button">Saldo</button> -->
										<h:commandButton styleClass="btn btn-warning" value="Salvar" action="#{contaCorrenteMB.salvar}"></h:commandButton>
									</div>
								</div>
							</div>
						</div>
					</h:form>
				</div>
			</div>
		</div>
	</ui:define>
	<!-- /container -->
</ui:composition>